<template>
  <div class="box">
    <h2 style="text-align: center" id="title">{{ form.proname }}</h2>
    <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-form-item label="分类:">{{ form.classname }} </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="督办编号:">{{ form.code }} </el-form-item>
        </el-col>
        <el-col :span="24" :offset="0">
          <el-form-item label="重点任务:">{{ form.keytask }} </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="工作举措:">
            <div class="Richtext" v-html="form.tasknote"></div>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="完成标准:">
            <div class="Richtext" v-html="form.standstr"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="备注:">
            <div class="Richtext" v-html="form.note"></div>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="说明:">
            <div class="Richtext" v-html="form.remark"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <h3>
        <span>任务描述</span>
      </h3>
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="objective" label="任务描述">
          <template slot-scope="scope">
            <div v-html="scope.row.objective"></div>
          </template>
        </el-table-column>
        <el-table-column prop="enddate" align="center" label="完成时间" width="180" />
        <el-table-column prop="workusername" align="center" label="责任人" width="180" />

        <el-table-column prop="workdpname" align="center" label="责任部门" width="180" />
      </el-table>
    </el-form>
    <el-form :model="Situationform" :rules="rules" ref="Situationform" label-width="85px" :inline="false" size="normal">
      <h3>
        <span>任务情况</span>
      </h3>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-form-item label="是否完结:">
            <el-radio-group v-model="Situationform.isfinal">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="Situationform.isfinal == '0'" :span="6" :offset="0">
          <el-form-item label="完成进度:" prop="comper">
            <el-input v-model="Situationform.comper">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="最新进展:" prop="note">
        <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 8 }"
          placeholder="请输入内容"
          v-model="Situationform.note"
        >
        </el-input>
      </el-form-item>
      <el-upload
        multiple
        class="upload-demo"
        :headers="headers"
        :action="action"
        :http-request="onUpload"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-preview="handlePreview"
        :on-progress="handleProgress"
        :before-remove="handleRemove"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">附件上传</el-button>

        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
      </el-upload>

      <div class="btnGroup">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button type="primary" @click="Report">上报</el-button>
      </div>
    </el-form>
    <h3 v-if="history">历史填报记录</h3>
    <el-table v-if="history" :data="historyData" border stripe style="width: 100%">
      <el-table-column prop="mdate" align="center" label="创建时间" width="180" />
      <el-table-column prop="comper" label="完成进度" />
      <el-table-column prop="isfinal" label="是否完结">
        <template slot-scope="scope">
          <div v-html="scope.row.isfinal == 0 ? '否' : '是'"></div>
        </template>
      </el-table-column>
      <el-table-column prop="note" label="最新进展">
        <template slot-scope="scope">
          <div v-html="scope.row.note"></div>
        </template>
      </el-table-column>

      <el-table-column prop="filearr" label="附件" min-width="200">
        <template slot-scope="scope">
          <div v-for="item in scope.row.linklists">
            <el-link type="success" @click="onlinkTaskTitle(item.url)">{{ item.name }}</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  QuerySplitByID,
  TaskQueryInfoByID,
  FillSavee,
  QueryFillBySplitID,
  QueryFillByID,
  upload,
  uploadlist,
  FileDel,
  getTaskFillID
} from '@/api/task/index'
import { getToken } from '@/utils/auth'
export default {
  name: '',
  data() {
    return {
      tempid: '',
      form: {},
      Situationform: {
        isfinal: '0'
      },
      tableData: [],
      // 历史填报记录
      historyData: [],
      // 附件上传
      fileList: [],
      action: '/UpLoadFile/upload',
      headers: {
        Authorization: getToken()
      },
      history: false,
      userdata: {
        userid: this.$store.getters.userInfo.id,
        username: this.$store.getters.userInfo.username,
        dpid: this.$store.getters.userInfo.orgid,
        dpname: this.$store.getters.userInfo.orgname
      },
      bloeDel: false,
      rules: {
        comper: [
          // { required: true, message: '完成进展为必填项', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value > 100) {
                callback(new Error('完成进展不能大于100'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        note: [{ required: true, message: '备注为必填项', trigger: 'blur' }]
      }
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(newId) {
        if (newId.path == '/Fourth/EmployeeHome/type3') {
          this.fileList = []
          this.onSearch()
        }
      }
    }
  },

  methods: {
    // 查询
    async onSearch() {
      const tempid = await getTaskFillID()
      this.tempid = tempid.docid

      this.form = {}
      this.tableData = []
      const { content } = await QuerySplitByID({ id: this.$route.query.documentid })
      if (content.objective != null) {
        content.objective = content.objective.replace(/\\n/g, '<br/>')
        content.objective = content.objective.replace(/\n/g, '<br/>')
      }
      this.tableData.push(content)

      const res = await TaskQueryInfoByID({ id: content.taskid })

      if (res.content.tasknote != null) {
        res.content.tasknote = res.content.tasknote.replace(/\\n/g, '<br/>')
        res.content.tasknote = res.content.tasknote.replace(/\n/g, '<br/>')
      }
      if (res.content.standstr != null) {
        res.content.standstr = res.content.standstr.replace(/\\n/g, '<br/>')
        res.content.standstr = res.content.standstr.replace(/\n/g, '<br/>')
      }
      if (res.content.note != null) {
        res.content.note = res.content.note.replace(/\\n/g, '<br/>')
        res.content.note = res.content.note.replace(/\n/g, '<br/>')
      }
      if (res.content.remark != null) {
        res.content.remark = res.content.remark.replace(/\\n/g, '<br/>')
        res.content.remark = res.content.remark.replace(/\n/g, '<br/>')
      }

      this.form = res.content

      this.QueryFillBySplit()
    },
    onlinkTaskTitle(row) {
      window.open(row)
    },
    async QueryFillBySplit() {
      this.historyData = []
      this.Situationform = {
        isfinal: '0'
      }
      const { content } = await QueryFillBySplitID({ splitid: this.$route.query.documentid })
      content.forEach(item => {
        if (item.note != null) {
          item.note = item.note.replace(/\\n/g, '<br/>')
          item.note = item.note.replace(/\n/g, '<br/>')
        }
        var newlist = []
        if (item.filearr != null) {
          var linklist = item.filearr.split('\\n')
          linklist.forEach(row => {
            console.log(row)
            var newfilearr = row.split('|')
            newlist.push({ name: newfilearr[0], url: newfilearr[1] })
          })
        }
        item.linklists = newlist
      })
      console.log(content)
      this.historyData = content
      if (content.length > 0) {
        this.history = true
        console.log('任务情况赋值', content)
        if (content[content.length - 1].valid != 5) {
          const res = await QueryFillByID({ id: content[content.length - 1].id })
          this.Situationform = res.content
          this.fileUploadList(res.content.tempid)
        }
      }
    },
    //附件查询
    async fileUploadList(tempid) {
      const data = {
        modelname: 'DBProject',
        keyvalue: tempid,
        createuser: this.userdata.userid
      }
      console.log('data', data)
      const { content } = await uploadlist(data)
      const arr = []
      content.forEach(item => {
        arr.push({ name: item.filename, url: item.filewebpathall, id: item.id })
      })
      this.fileList = arr
    },
    // 保存
    async onSave() {
      this.$refs.Situationform.validate(async valid => {
        if (valid) {
          const data = {
            splitid: this.$route.query.documentid,
            valid: 1,
            ...this.userdata,
            ...this.Situationform
          }

          if (!data.id) {
            data.id = 0
            data.tempid = this.tempid
          }
          if (data.isfinal == '1') {
            data.comper = '100'
          }
          const res = await FillSavee(data)
          if (res.success == true) {
            this.$message.success(res.message)
            this.QueryFillBySplit()
          } else {
            this.$message.error(res.message)
          }
        } else {
          this.$message.error('请检查必填项')
          return false
        }
      })
    },
    // 上报
    async Report() {
      this.$refs.Situationform.validate(async valid => {
        if (valid) {
          const data = {
            splitid: this.$route.query.documentid,
            ...this.userdata,
            ...this.Situationform,
            valid: 5
          }
          if (!data.id) {
            data.id = 0
            data.tempid = this.tempid
          }
          if (data.isfinal == '1') {
            data.comper = '100'
          }
          const res = await FillSavee(data)
          if (res.success == true) {
            this.fileList = []
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.go(-1)
          }
        } else {
          this.$message.error('请检查必填项')
          return false
        }
      })
    },
    // 文件上传
    async onUpload(data) {
      console.log(data.file)
      const tmpi = this.Situationform.tempid || this.tempid

      // this.loading = true
      // this.index++
      // var file = data.file
      // const maxSize = 300 * 1024 * 1024 // 300MB，根据你的需求设置最大文件大小
      // if (file.size > maxSize) {
      //   this.$Message({
      //     message: `文件大小超过了${maxSize / (1024 * 1024)}MB的限制`,
      //     type: 'warning'
      //   })
      //   return false
      // }
      console.log('Situationform', this.Situationform)
      const formData = new FormData()
      formData.append('files', data.file)
      formData.append('modelCode', 'DBProject')
      formData.append('docID', tmpi)
      formData.append('userID', this.userdata.userid)
      upload(formData)
        .then(result => {
          if (result.success) {
            this.$message.success('上传成功')
          } else {
            this.$message.error('上传失败')
          }
        })
        .catch(err => {
          data.onError()
          this.$message.error('上传失败')
          console.error('err:', err)
        })
    },

    // 文件上传成功时的钩子
    handleSuccess(response, file, fileList) {
      console.log('on-success', response)
      console.log('on-success', file)
      console.log('on-success', fileList)
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      console.log('on-error', err)
      console.log('on-error', file)
      console.log('on-error', fileList)
    },
    // 点击文件列表
    handlePreview(file) {
      window.open(file.url)
    },
    // 文件上传时的钩子
    handleProgress(event, file, fileList) {
      console.log('on-progress', event)
      console.log('on-progress', file)
      console.log('on-progress', fileList)
    },
    //删除文件
    handleRemove(file, fileList) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await FileDel({ fileID: file.id })
          console.log(res.success)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fileUploadList(this.Situationform.tempid)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          this.bloeDel = false
        })

      return this.bloeDel
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
  position: relative;
}
.el-card {
  background-color: transparent;
}

.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

#todo-col {
  padding: 0 20px 20px 0;
}
#Fill-col {
  padding: 10px 20px 0 0;
}
#todo-task {
  padding: 0 20px 20px 0;
}
#Fill-Echart {
  padding: 10px 20px 0 0;
}

.task-card {
  overflow: auto;
  height: 310px;
}
.task-div {
  padding-bottom: 15px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
.red {
  background: lightyellow;
}
.btnGroup {
  padding-top: 20px;
}
.Richtext {
  word-break: break-all;
  margin-right: 5px;
  line-height: 1.5;
  border: 1px solid #dcdfe6;
  height: 120px;
  overflow: auto;
  padding-left: 5px;
  line-height: 25px;
}
</style>
